


<template>
	<view>
		<global-contact></global-contact>
		<!-- 首部筛选 -->
		<!-- <view class="header">
			<view class="head">
				<image style="width: 30rpx;height: 30rpx;" src="https://www.atuanjian.com/appletStatic/static/local.png" mode=""></image>
				<view class="local" @click="chooseCity()">
					<text>{{currentCity.lastIndexOf('市')?currentCity.replace(/市/,""):currentCity}}</text>
					<view class="trang"></view>
				</view>
				<view class="search">
					<u-search @search="search()" placeholder="户外拓展/团建/骑行" :showAction="false" v-model="keyword"></u-search>
				</view>
				<image @click="changeSort()" src="https://www.atuanjian.com/appletStatic/static/sort.png" mode="aspectFit"></image>
				<u-line direction="col" length="24rpx" color="#E7E7E7"></u-line>
				<image @click="filtrate()" src="https://www.atuanjian.com/appletStatic/static/choice.png" mode="aspectFit"></image>
			</view>
		</view> -->
		
		<view class="nav">
			<text :class="{active:navBarIndex==index}" v-for="(item,index) in newsMain" :key="index" @click="activeClick(index)">{{item.title}}</text>
		</view>
		
		
		<view class="ul" v-if="newsMain.length>0">
			<view class="li" v-for="(item,index) in newsMain[navBarIndex].news" :key="index" @click="newsDetail(item)">
				<!-- <view class="left">
					<image src="https://www.atuanjian.com/appletStatic/static/home/trang.png" mode=""></image>
					<view class="tit">{{item.title}}</view>
				</view>
				<view class="right">{{item.release_date.substring(0,11)}}</view> -->
				<image :src="showImg+item.img" mode="aspectFill"></image>
				<view class="mark">
					<view class="tit">{{item.title}}</view>
					<view class="time">{{item.release_date.substring(0,11)}}</view>
				</view>
			</view>
		</view>
			
		<u-picker :show="showCity" :columns="cityList" @cancel="cancel1"  @confirm="confirm1"></u-picker>
		
		<u-picker :show="showSort"  keyName="label" :columns="sortList" @cancel="cancelSort"  @confirm="confirmSort"></u-picker>

	</view>
</template>

<script>
	import { newsShow,siteSetting } from '@/utils/request.js'
	export default {
		data() {
			return {
				navBarIndex:0,
				newsMain:[],
				showImg:'',

				// 顶部添加  搜索栏 
				keyword:'',
				priceSort:'',
				showCity:false,
				cityList:[],
				currentCity:uni.getStorageSync('webAddress'),
				showSort:false,
				sortList:[
					 [{
						label: '默认排序', 
						value: '' 
					}, {
						label: '浏览量低到高',
						value: 'asc'
					}, {
						label: '浏览量高到低',
						value: 'desc'
					}]
				],
			}
		},
		methods: {
			// 添加 搜搜兰 需要的内容
			changeSort(){ 
				this.showSort=true 
			},
			cancelSort(){
				this.showSort=false
			},
			confirmSort(e){ 
				this.priceSort=e.value[0].value
				this.showSort=false
				// this.page=0
				// this.list=[]
				// this.getList()
			},
			async siteSetting(){
				return await siteSetting()
			},
			getSetting(){
				this.siteSetting().then(res=>{ 
					uni.setStorageSync('webAddress',res.default_substation)
					// this.currentCity=res.default_substation
					if(res.city&&res.city.length>0){
						this.cityList.push(res.city)
					}
					// this.defaultMethods()
				})
			},

			cancel1(){
				this.showCity=false
			},
			confirm1(event){ 
				uni.setStorageSync('webAddress',event.value[0])
				this.currentCity=event.value[0] 
				this.showCity=false
				// this.page=0
				// this.list=[]
				// this.getList()
			},

				chooseCity(){
				this.showCity=true
				// uni.showToast({
				// 	icon:'loading',
				// 	title:'正在研发中...'
				// })
			},
			search(){
				if(!this.keyword.trim()){
					uni.showToast({
						icon:'none',
						title:'请输入关键词'
					})
					return;
				} 
				this.catId=''
				// this.getList() 

				// #ifdef H5
				var redirectToUrl = this.$route.fullPath;
				if (this.$route.query['search']) {
					// console.log(this.$route.query['search'])
					redirectToUrl = redirectToUrl.replace('search='+this.$route.query['search'], 'search='+this.keyword); // 替换搜索内容
				} else {
					redirectToUrl += `&search=${this.keyword}`; // 携带参数
				}
				if (this.$route.query['keywords']) {
					redirectToUrl = redirectToUrl.replace('keywords='+this.$route.query['keywords'], 'keywords='+this.keyword); // 替换搜索内容
				} else {
					redirectToUrl += `&keywords=${this.keyword}`; // 携带参数
				}
				uni.redirectTo({
					url: redirectToUrl
				});
				// #endif
				// #ifdef MP-WEIXIN
				this.getList();
				// #endif
			},
			
			filtrate(){
				// uni.setStorageSync('mark_id','5')
				// uni.navigateTo({
				// 	url:'/pagesB/annualMeeting/filtrateNew?categoryId=5'
				// })
			},
			// ***********************************
			newsDetail(item){
				uni.navigateTo({
					url:'/pagesA/detail/news?id='+item.id
				})
			},
			activeClick(index){
				if(this.navBarIndex!=index){
					this.navBarIndex=index
				}
			},	
			// 新闻动态
			async newsShow(data){
				return await newsShow(data)
			},
			getNewsList(){
				let data={

				}
				this.newsShow(data).then(res=>{ 
					console.log(res,'newsShow')
					 this.newsMain=res
				}).catch(err=>{
					// console.log(err)
				})
			},
		},
		onLoad() { 
			this.showImg=this.$config.showImgApi;
			if (option.keywords) {
				this.keyword = option.keywords
			}
			this.getNewsList()
			this.getSetting()
		},
		onShareAppMessage() {
			
		} 
	}
</script>

<style  lang="scss">
	.nav{
		@include flex_style(flex-start,center,row nowrap);
		background-color: #E9E9E9;
		text{
			flex: 1;
			text-align: center;
			line-height: 72rpx;
			font-size: 28rpx;
			font-family: 苹方-简;
			font-weight: normal; 
			color: #666666;
		}
		.active{
			background-color: #FFB850;
			color: #FFFFFF;
		}
	}
	.ul{
		.li{
			// @include flex_style(space-between,center,row nowrap);
			margin-top: 28rpx;
			text-align: center;
			position: relative;
			image{
				width: 680rpx;
				height: 480rpx;
				margin: 20rpx auto;
			}
			.mark{
				width: 680rpx;
				// height: 480rpx;
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				background: linear-gradient(93deg, rgba(0, 0, 0, 0.36) 0%, rgba(0, 0, 0, 0.14) 100%);
				@include flex_style(flex-end,flex-start,column nowrap);
				padding-top: 1px;
				.tit{
					color: #FFFFFF;
					margin: 20rpx 0 10rpx 20rpx;
				}
				.time{
					color: #FFFFFF;
					margin: 0 0 20rpx 20rpx;
				}
			}
			// .left{
			// 	@include flex_style(flex-start,center,row nowrap);
			// 	image{
			// 		width: 20rpx;
			// 		height: 24rpx;
			// 		margin-right: 16rpx;
			// 	}
			// 	.tit{ 
			// 		width: 450rpx;
			// 		overflow: hidden;
			// 		text-overflow: ellipsis;
			// 		white-space: nowrap;
			// 		font-size: 24rpx;
			// 		font-family: 苹方-简;
			// 		font-weight: normal;
			// 		line-height: 32rpx;
			// 		color: #333333;
			// 	}
			// }
			// .right{
			// 	font-size: 24rpx;
			// 	font-family: 苹方-简;
			// 	font-weight: normal;
			// 	line-height: 32rpx;
			// 	color: #666666;
			// }
		}
	}
	
	.header{
		background: #FFB850;
		width: 750rpx;
		height: 88rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 90;
		.head{
			@include flex_style(space-between,center,row nowrap);
			padding: 16rpx 22rpx 16rpx 30rpx;
			.local{
				@include flex_style(flex-start,center,row nowrap);
				text{
					display: block;
					max-width: 85rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 28rpx;
					font-family: 苹方-简;
					font-weight: normal;
					line-height: 38rpx;
					color: #FFFFFF;
				}
				.trang{
					width: 0;
					height: 0;
					border-left: 7rpx solid transparent;
					border-right: 7rpx solid transparent;
					border-top: 10rpx solid #FFFFFF;
					margin-left: 8rpx;
				}
			}
			.search{
				width: 440rpx;
				height: 56rpx;
				::v-deep.u-search__content{
					background-color: #F5F5F5!important;
					border-width:0;
				}
				::v-deep.u-search__content__input{
					height: 56rpx!important;
					background-color: #F5F5F5!important;
					border-width:0;
				}
			}
			image{
				width: 48rpx;
				height: 48rpx;
			}
			 
		}
	}
</style>
